<template>
	<div class="btns no-drag">
		<i v-if="isShowTop" :class="['iconfont icon-icon_zhiding', { 'active': isTop }]" @click="handleBtn(0)"></i>
		<i v-if="isShowMin" class="iconfont icon-jian" @click="handleBtn(1)"></i>
		<i v-if="isShowMax" :class="['iconfont', isMax ? 'icon-chuangkouhuanyuan' : 'icon-fangda']"
			@click="handleBtn(2)"></i>
		<i v-if="isShowClose" class="iconfont icon-guanbi close" @click="handleBtn(3)"></i>
	</div>
</template>

<script setup lang="ts">
const props = defineProps({
	isShowTop: { type: Boolean, default: false }, // 是否显示置顶按钮
	isShowMin: { type: Boolean, default: false }, // 是否显示缩小按钮
	isShowMax: { type: Boolean, default: false }, // 是否显示放大按钮
	isShowClose: { type: Boolean, default: true }, // 是否显示关闭按钮
	closeType: { type: Number, default: 0 }, // 0关闭 1隐藏
})
import { ref, onMounted, onUnmounted } from 'vue';
const isTop = ref(false); // 是否置顶
const isMax = ref(false); // 是否最大化
const handleBtn = (type: number) => {
	switch (type) {
		case 0: // 置顶
			isTop.value = !isTop.value;
			winBtn('top', { top: isTop.value })
			break;
		case 1: // 最小化
			winBtn('minimize');
			break;
		case 2: // 最大化或还原
			winBtn('maximize');
			break;
		case 3: // 关闭
			winBtn('close', { closeType: props.closeType });
			break;
		default:
			break;
	}
}
/**
 * 窗口操作
 * @param {String} action 操作类型
 * @param {Object} data 操作数据
*/
const winBtn = (action, data: any = null) => {
	(window as any).ipcRenderer.invoke('winBtn', { action, data });
}

onMounted(() => {
	// 窗口状态变化监听
	(window as any).ipcRenderer.on('window-maximize-changed', (_event, { isMaximized }) => {
		isMax.value = isMaximized;
	});
});

onUnmounted(() => {
	(window as any).ipcRenderer.removeAllListeners('window-maximize-changed');
});
</script>

<style lang="scss" scoped>
.btns {
	position: absolute;
	top: 5px;
	right: 5px;
	display: flex;

	i {
		padding: 6px;
		border-radius: 4px;
		font-size: 13px;

		&.active {
			background: #ccc;
			color: rgb(0, 255, 72);
		}

		&:hover {
			background: #ccc;
			cursor: pointer;
		}

		&:not(:last-child) {
			margin-right: 5px;
		}

		&.close {
			&:hover {
				background: #f00;
				color: #fff;
			}
		}
	}
}
</style>
